<template>
  <div v-if="JSON.stringify(data.detail) != '{}'">
    <div class="mw-column-center-style" style="margin-bottom: 0.5rem;">
      <div style="width:3.75rem;height:1.88rem;position: relative">
        <img style="height:100%;width:100%;object-fit:cover;position: absolute;left:0;" :src="data.detail.cover_image"/>
        <div style="height:100%;width:100%;position: absolute;left:0;background-color: rgba(0,0,0,0.6)"></div>
        <div class="mw-main-white mw-n-line"
             style="line-height:0.33rem;font-size:0.22rem;width:3.45rem;position: absolute;bottom:0.15rem;padding:0 0.15rem;">
          {{data.detail.title}}
        </div>
      </div>
      <div  style="width:3.45rem;padding:0.15rem;">
        <div @click="data.skipToUserpage(data.detail.user.id)" class="mw-row-style" style="align-items: center;margin-bottom: 0.15rem;">
          <div style="height:0.44rem;width:0.44rem;position: relative">
            <img class="mw-avatar-style" :src="data.detail.user.avatar"
                 style="height:100%;width:100%;  border-radius: 50%;object-fit:cover;position: absolute;left:0;"/>

          </div>
          <div class="mw-column-style" style="justify-content: center;height:0.44rem;margin-left:0.12rem;">
            <div class="mw-single-line mw-first-text-color" style="font-size: 0.16rem;margin-bottom: 0.08rem">
              {{data.detail.user.name}}
            </div>
            <div class="mw-third-text-color" style="font-size: 0.13rem;">
              {{data.detail.published_time}} · {{data.detail.views_total < 10000 ? data.detail.views_total : (Math.floor(data.detail.views_total / 10000 * 10) / 10 + 'w')}}人阅读
            </div>
          </div>
        </div>
        <div class="mw-horizon-divider" style="width:100%;margin-bottom:0.15rem;"></div>
        <div class="contentbox" v-html="data.detail.content">
        </div>
      </div>
      <div class="mw-horizon-divider" style="width: 3.75rem;height:0.08rem;"></div>
      <div class="mw-column-style" style="width: 3.45rem;padding:0 0.15rem;">
        <div class="mw-row-style" style="height:0.5rem;align-items: center">
          <div class="mw-first-text-color" style="font-weight: bold;font-size: 0.16rem;">评论</div>
        </div>
        <div class="mw-horizon-divider" style="width: 100%;"></div>
        <div @click="data.skipToDownload" v-for="(item,index) in data.commentlist" class="mw-column-style" style="align-items:flex-end;width: 100%">
          <div class="mw-row-spacebetween-style" style="margin-top:0.15rem;align-items: flex-start;width: 100%">
            <div @click.stop="data.skipToUserpage(item.user.id)" class="mw-row-style" style="align-items: flex-start;">
              <img class="mw-avatar-style" style="height:0.34rem;width:0.34rem;border-radius: 50%;"  :src="item.user.avatar == ''? '/static/defalut_avatar.png':item.user.avatar"></img>
              <div class="mw-single-line mw-second-text-color" style="margin-left:0.1rem;font-size: 0.13rem;width:2.5rem;">{{item.user.name}}</div>
            </div>
            <div class="mw-row-style" style="align-items: center;">
              <img @click.stop="data.commentlike(item)" style="height:0.16rem;width:0.16rem;object-fit:cover;margin-right:0.04rem" :src="item.liked == 1 ? '/static/article_zan.png':'/static/article_unzan.png'" />
              <div :class="item.liked == 1 ?'mw-main-red ':'mw-second-text-color'" style="font-size: 0.11rem;">{{item.likes_total < 10000 ? item.likes_total : (Math.floor(item.likes_total / 10000 * 10) / 10 + 'w')}}</div>
            </div>
          </div>
          <div class="mw-column-style" style="width: 3.01rem">
            <div class="mw-n-line mw-first-text-color" style="font-size: 0.17rem;line-height: 1.5;margin-bottom: 0.1rem;width: 100%">{{item.content}}</div>
            <div class="mw-main-gray" style="font-size: 0.13rem;line-height: 1.5;margin-bottom: 0.1rem;">{{item.created_at}}</div>
            <div v-if="item.reply != null" class="mw-column-style mw-background-color" style="width: 2.81rem;border-radius: 0.1rem;padding:0.1rem;">
              <div @click.stop="data.skipToUserpage(item.reply.user.id)" class="mw-row-style" style="align-items: center;">
                <img class="mw-avatar-style" style="height:0.2rem;width:0.2rem;border-radius: 50%;"  :src="item.reply.user.avatar== ''? '/static/defalut_avatar.png':item.reply.user.avatar"></img>
                <div class="mw-single-line mw-third-text-color" style="margin-left:0.08rem;margin-bottom:0.06rem;font-size: 0.13rem;width:2rem;">{{item.reply.user.name}}</div>
              </div>
              <div class="mw-n-line mw-first-text-color" style="font-size: 0.13rem;line-height: 1.5;margin-bottom: 0.08rem;width: 100%">{{item.reply.content}}</div>
              <div style="color:#5789c2;font-size: 0.13rem;line-height: 1.5;">打开妙汇APP查看全部({{item.comments_total}}条)</div>
            </div>
          </div>
        </div>
        <div v-if="data.commentlist.length == 0" class="mw-column-style" style="width: 100%;padding:0.5rem 0;align-items: center">
          <img src="/static/empty.png" style="width: 2rem;height:1rem;margin-bottom: 0.3rem"/>
          <div class="mw-third-text-color" style="font-size: 0.13rem;">太低调了吧 居然没有评论</div>
        </div>
      </div>
    </div>
    <div class="mw-row-style mw-main-background-white" style="position:fixed;bottom:0;align-items:center;width: 3.75rem;height:0.49rem;box-shadow:0 -0.04rem 0.1rem 0 rgba(0,0,0,0.04);">
      <div class="mw-active-rectangle-button " style="margin-left:0.15rem;width:2.2rem;height:0.36rem;border-radius: 0.18rem;">
        <div @click="data.skipToDownload" style="font-size:0.12rem;" class="mw-main-red ">打开妙汇APP去评论</div>
      </div>
      <div style="position:relative;margin:0 0.43rem 0 0.31rem">
        <img @click="data.like" style="height:0.24rem;width:0.24rem;object-fit:cover;" :src="data.detail.liked == 1 ? '/static/article_zan.png':'/static/article_unzan.png'" />
        <div class="mw-second-text-color" style="position:absolute;top:0;left:0.24rem;font-size: 0.1rem;width:0.4rem;">{{data.detail.likes_total < 10000 ? data.detail.likes_total : (Math.floor(data.detail.likes_total / 10000 * 10) / 10 + 'w')}}</div>
      </div>
      <div  style="position:relative;margin-right:0.43rem">
        <img @click="data.collect" style="height:0.24rem;width:0.24rem;object-fit:cover;" :src="data.detail.collected == 1 ? '/static/collected.png':'/static/article_uncollect.png'" />
        <div class="mw-second-text-color" style="position:absolute;top:0;left:0.24rem;font-size: 0.1rem;width:0.4rem;">{{data.detail.collects_total < 10000 ? data.detail.collects_total : (Math.floor(data.detail.collects_total / 10000 * 10) / 10 + 'w')}}</div>
      </div>
      <!--<img style="height:0.24rem;width:0.24rem;object-fit:cover;" src="/static/article_share.png"/>-->
      <!--<div  style="position:relative;">-->
        <!--<img style="height:0.24rem;width:0.24rem;object-fit:cover;" src="/static/article_share.png"/>-->
        <!--<div class="mw-second-text-color" style="position:absolute;top:0;left:0.24rem;font-size: 0.1rem;width:0.4rem;">12</div>-->
      <!--</div>-->
    </div>
    <v-backhome enter="contentdetail"></v-backhome>
  </div>



</template>

<script>

  import utils from '../../utils'
  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'contentdetail'}),
      mapRules({store: [{path: 'contentdetail'}],need: [{path: 'contentdetail'}]}),
    ],

    data() {
      return {}
    },


    beforeCreate() {

    },
    updated(){
//      document.querySelector(".contentbox").querySelectorAll('img').forEach(e=>{
//        e.style.maxWidth = '100%';
//        e.style.height = 'auto';
//      })
    },
    created() {

    },
    mounted() {
      var that = this
      this.data.needFetch = true
      window.onload = function() {
        document.onclick = function (e) {
          let el = e.target || e.srcElement;
          while (el === null || el.tagName !=='A') {
            if (el === null) {
              return false
            }
            el = el.parentElement
          }

          if (el.href != undefined) {
            utils.skipFilter(el.href,that)
            return false
          }
        };
      }
//      var that = this
//      document.getElementsByClassName("contentbox")[0].addEventListener("click", function(e){
//        debugger
//        let el = e.target || e.srcElement;
//        while (el === null || el.tagName !=='A') {
//          el = el.parentElement
//        }
//
//        if (el.href != undefined) {
//          utils.skipFilter(el.href,that)
//          return false
//        }
//      });

    },
    updated(){
    },
    destroyed(){

    },
    methods: {
//      skipHome() {
//        this.data.needFetch = false
//        this.$router.push({name: 'shop'})
////        window.location.replace(window.location.origin)
//      }
//      onPageClick(e) {
//        debugger
//        return false
////        let el = e.target || e.srcElement;
////        while (el !== null || el.tagName !=='A') {
////          el = el.parentElement
////          if (el == null) {
////            return false
////          }
////        }
////        if (el.href != undefined) {
////          utils.skipFilter(el.href,this)
////          return false
////        }
//      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .contentbox {
    overflow: hidden;
    position:relative;
    font-size:17px;
    line-height: 1.7;
    color: #333333;
    margin:0;
    padding:0;
  }

  .contentbox img {
    max-width: 100%;
    object-fit: contain;
  }
</style>
